<%@ page import="com.topfun.utils.DateUtil" %>
<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>幸运乐翻天</title>
    <link href="./static/css/app.css?time=<%=System.currentTimeMillis()%>" rel="stylesheet">
</head>
<body>
<div id="app" class="bg">
    <jsp:include page="top.jsp"/>
    <div class="continer">
        <div class="FlipCard">
            <div>
                <div class="header">
                    <div class="info"></div>
                </div>
                <div class="malert" id="infoAlert">
                    <div class="dialog-cover" style="display: none;"></div>
                    <div class="alertC" style="display: none;">
                        <div class="gz"><span class="closeBtn"></span>
                            <div class="mcontent">
                                <ol>
                                    <li>玩家每次下注后有5次翻牌机会，每次机会可选择一张卡片翻开，只要在会用完之前翻到三张一样的卡片即可中奖。</li>
                                    <li>游戏开始后，屏幕上面会出现背面朝上的“777、铃铛、西瓜”三种图片的卡片各三张。</li>
                                    <li>本游戏仅支持商城宝贝币进行投币，投币后点击“开始”进行投币。</li>
                                </ol>
                                <div class="biao">
                                    <div class="item"><span>投注额</span> <span><i  class="icon7">77*3</i></span> <span><i  class="iconling">铃铛*3</i></span> <span><i  class="icontao">樱桃*3</i></span></div>
                                    <div class="item"><span>10</span> <span>60</span> <span>30</span> <span>14</span></div>
                                    <div class="item"><span>50</span> <span>300</span> <span>150</span> <span>70</span></div>
                                    <div class="item"><span>100</span> <span>600</span> <span>300</span> <span>140</span></div>
                                    <div class="item"><span>500</span> <span>3000</span> <span>1500</span> <span>700</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="cardWapper">
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                </div>
            </div>
<%--            <div class="footer">
                <div class="actions">
                    <div class="counter">
                        <div class="item item10"></div>
                        <div class="item item50"></div>
                        <div class="item item100"></div>
                        <div class="item item500"></div>
                    </div>
                    <div id="totals" class="totals">
                        5/5 翻牌机会
                    </div>
                </div>

            </div>--%>
            <div class="malert">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="duisuc" style="display: none;"><span class="closeBtn"></span>
                        <div class="text">
                            余额不足请先充值
                        </div> <button type="button" name="button" class="sucbtn">充值</button></div>
                </div>
            </div>
            <div class="malert" id="nojiang">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu"><span class="closeBtn"></span>
                        <div class="mcontent">
                            <div class="mkey">
                                “很遗憾，未中奖”
                            </div>
                            <div class="jiang"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="malert" id="jiang">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu">
                        <div class="mcontent">
                            <div class="lists">
                                <div name="win" class="item item0"></div>
                                <div name="win"  class="item item0"></div>
                                <div name="win"  class="item item0"></div>
                            </div>
                            <div class="counts">
                                <div class="num" id="winAmount"></div>
                            </div>
                            <div class="jiang"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="malert">
        <div class="dialog-cover" style="display: none;"></div>
        <div class="alertC" style="display: none;">
            <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
                <div class="text">
                    <div class="dous"></div>
                    <div class="oper"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="malert" id="duanComfirm">
        <div class="dialog-cover" style="display: none;"></div>
        <div class="alertC" style="display: none;">
            <div class="scomfirm" style="display: none;">
                <span class="closeBtn"></span>
                <div class="text">本次游戏尚未结束，确定退出？</div>
                <button type="button" name="button" id="calChange" class="calbtn">取消</button>
                <button type="button" name="button" id="sureChange" class="sucbtn">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- built files will be auto injected -->
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="/static/js/home.js?time=<%=System.currentTimeMillis()%>" charset="utf-8"></script>
<script>
    $(function () {
        var betOrder = ${betOrder} || {};
        var winningLevel = betOrder.winningLevel;
        var sort = betOrder.sort||[];
        var orderId = betOrder.orderId;
        var bonus = betOrder.bonus+'';
        console.log(sort)
        var tep = [];
        var count = 5;
        var winningCount = 5;//第几张中奖 会同count --
        var winningTotal = 5;//固定
        var index = 0;
        var flag = winningLevel == 0 ? false : true;
        if(flag){
            //如果已经中奖，判断前面几张就中奖了
            var count7 = 0;
            var count8 = 0;
            var count9 = 0;
            for(var i= 0;i<5;i++){
                if(sort[i] == 7){
                    count7++;
                }else if(sort[i] == 8){
                    count8++;
                }else{
                    count9++;
                }
                if(count7 == 3 || count8 ==3 || count9 == 3){
                    winningCount = i+1;
                    winningTotal = i+1;
                    break;
                }
            }
        }
        var link='';
        $('a').click(function(e){
            if(count>0) {
                e.preventDefault();
                $('#duanComfirm .dialog-cover,#duanComfirm .alertC,#duanComfirm .scomfirm').fadeIn()
                link = $(this).attr('href');
            }
        })
        $('#calChange').click(function(){
            $('#duanComfirm .dialog-cover,#duanComfirm .alertC,#duanComfirm .scomfirm').fadeOut()
        })
        $('#sureChange').click(function(){
            $('#duanComfirm .dialog-cover,#duanComfirm .alertC,#duanComfirm .scomfirm').fadeOut()
            location.href= link;
        })
        $('.cardWapper .cardItem').click(function(event) {
            if(count>0) {

                if($(this).hasClass('active')) return;
                $(this).addClass('active')
                $(this).find('.end').addClass('card'+sort[5-count])
                $(this).find('.front').removeClass('in')
                $(this).find('.end').removeClass('out').addClass('in')
                count--;
                winningCount --;
                $('#totals').html(count+'/5 翻牌机会');
                if(count == 0 || winningCount == 0){
                    window.setTimeout(function(){
                        tep=sort.slice((winningTotal-1),sort.length)
                        $('.cardWapper .cardItem').not('.active').each(function(){
                            index++;
                            $(this).addClass('disabled')
                            $(this).find('.end').addClass('card'+tep[index])
                        })
                        $('.cardWapper .cardItem').addClass('active')
                        $('.cardWapper .cardItem .front').removeClass('in')
                        $('.cardWapper .cardItem .end').removeClass('out').addClass('in')
                        window.setTimeout(function(){
                            if(!flag) {
                                $('#nojiang .dialog-cover,#nojiang .alertC').fadeIn()
                            }else{
                                //中奖更新用户乐豆
                                if (localStorage.user) {
                                    var user = JSON.parse(localStorage.user);
                                    $.ajax({
                                        method: "POST",
                                        url: "/topfun/grant/prize",
                                        data: {
                                            userId: user.userId,
                                            token: user.token,
                                            orderId:orderId,
                                        },
                                        success: function (result) {
                                            var data = JSON.parse(result);
                                            if(data.code == 0){
                                                localStorage.user = data.data;
                                                var user = JSON.parse(localStorage.user);
                                                $('#amount').html(user.amount);
                                            }
                                        }
                                    });
                                }
                                if(winningLevel == 1){
                                    $('div[name=win]').addClass('item7')
                                }else if(winningLevel == 2){
                                    $('div[name=win]').addClass('item8')
                                }else{
                                    $('div[name=win]').addClass('item9')
                                }
                                var bonusHtml = '';
                                for(var i=0;i<bonus.length;i++){
                                    bonusHtml += '<span class="num'+bonus.substring(i,i+1)+'"></span>';
                                }
                                $('#winAmount').html(bonusHtml);
                                $('#jiang .dialog-cover,#jiang .alertC').fadeIn()
                            }
                        },500)
                    },1000)
                }
            }
        });
        $('.jiang').click(function(){//再玩一局
            window.location.href = '/index.html';
        })
    });
</script>
</body>

</html>
